<template>
    <div class="box">
        <headers title="首页"></headers>
        <div style="display: flex; align-items: center;justify-content: center;">
            <searchs></searchs>
            <router-link to="/shoplist">
                <van-icon name="bars" />
            </router-link>
        </div>
        <swipers :list="list"></swipers>
        <van-grid :border="false" :column-num="4">
            <van-grid-item v-for="(v, i) in navlist" :key="i">
                <van-image
                    :src="v.image_src ? v.image_src : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'" />
            </van-grid-item>
        </van-grid>
        <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="(v, i) in searchlist" :key="i">
                <van-image
                    :src="v.goods_small_logo ? v.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                    @click="todetail(v.goods_id)" />
                <p>{{ v.goods_name }}</p>
            </van-grid-item>
        </van-grid>
        <van-floating-bubble v-model:offset="offset" axis="xy" style="width: 90%; background: pink;" v-if="isShow">
            <p>
                <span>新用户福利</span>
                <span @click="delFun()">X</span>
            </p>
        </van-floating-bubble>
    </div>
</template>

<script setup>
import searchs from '@/components/searchs.vue';
import headers from '@/components/headers.vue';
import swipers from '@/components/swipers.vue';
import { swiperdataApi, catitemsApi, searchApi } from '@/api/api';
import { ref } from 'vue';
const offset = ref({ x: 20, y: 500 });
let isShow = ref(true)
const abcd = () => {
    if (localStorage.getItem('abc')) {
        isShow.value = false
    } else {
        localStorage.setItem('abc', 123)
    }
}
abcd()
const delFun = () => {
    isShow.value = false
}
//轮播图
let list = ref([])
const getlist = () => {
    swiperdataApi().then((res) => {
        list.value = res.data.message
    })
}
getlist()
//nav导航
let navlist = ref([])
const getnavlist = () => {
    catitemsApi().then((res) => {
        navlist.value = res.data.message
    })
}
getnavlist()
//瀑布流
let searchlist = ref([])
const getsearchlist = () => {
    searchApi().then((res) => {
        searchlist.value = res.data.message.goods
    })
}
getsearchlist()
//跳转详情页面
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const todetail = (goods_id) => {
    router.push({ path: '/detail', query: { goods_id: goods_id } })
}
</script>

<style lang="scss" scoped></style>